<template>
  <a-card>
    <div :class="advanced ? 'search' : null">
      <a-form layout="horizontal">
        <div :class="advanced ? null : 'fold'">
          <a-row>
            <a-col :md="6" :sm="24">
              <a-form-item
                label="类别"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-select placeholder="请选择">
                  <a-select-option
                    v-for="item in searchOptionsType"
                    :value="item.value"
                    :key="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item
                label="死亡方式"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-select placeholder="请选择">
                  <a-select-option
                    v-for="item in searchOptionsMode"
                    :value="item.value"
                    :key="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item
                label="查询内容"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-input-number style="width: 100%" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span style="float: right; margin-top: 3px">
                <a-button type="primary">查询</a-button>
                <a-button style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <div>
      <a-tabs>
        <!-- 生者 -->
        <a-tab-pane key="1" tab="汇率实况">
          <img src="@/assets/hlsk.png" />
        </a-tab-pane>
        <!-- 死者 -->
        <a-tab-pane key="2" tab="烧纸记录" force-render>
          <standard-table
            :columns="column1"
            :dataSource="tableData1"
            :selectedRows.sync="selectedRows"
            @clear="onClear"
            @change="onChange"
            @selectedRowChange="onSelectChange"
          >
            <div slot="action" slot-scope="{ text, record }">
              <a style="margin-right: 8px"> <a-icon type="edit" />编辑 </a>
              <a @click="deleteRecord(record.key)">
                <a-icon type="delete" />删除
              </a>

              <router-link :to="`/list/query/detail/${record.key}`"
                >详情</router-link
              >
            </div>
            <template slot="statusTitle">
              <a-icon @click.native="onStatusTitleClick" type="info-circle" />
            </template>
          </standard-table>
        </a-tab-pane>
        <!-- 已删除 -->
        <a-tab-pane key="3" tab="用户资产">
          <standard-table
            :columns="column2"
            :dataSource="tableData2"
            :selectedRows.sync="selectedRows"
            @clear="onClear"
            @change="onChange"
            @selectedRowChange="onSelectChange"
          >
            <div slot="action" slot-scope="{ text, record }">
              <a style="margin-right: 8px"> 恢复 </a>
              <router-link :to="`/list/query/detail/${record.key}`"
                >详情</router-link
              >
            </div>
            <template slot="statusTitle">
              <a-icon @click.native="onStatusTitleClick" type="info-circle" />
            </template> </standard-table
        ></a-tab-pane>
      </a-tabs>
    </div>
  </a-card>
</template>

<script>
import StandardTable from "@/components/table/StandardTable";
const columns = [
  {
    title: "规则编号",
    dataIndex: "no",
  },
  {
    title: "描述",
    dataIndex: "description",
    scopedSlots: { customRender: "description" },
  },
  {
    title: "服务调用次数",
    dataIndex: "callNo",
    sorter: true,
    needTotal: true,
    customRender: (text) => text + " 次",
  },
  {
    dataIndex: "status",
    needTotal: true,
    slots: { title: "statusTitle" },
  },
  {
    title: "更新时间",
    dataIndex: "updatedAt",
    sorter: true,
  },
];

const dataSource = [];

for (let i = 0; i < 100; i++) {
  dataSource.push({
    key: i,
    no: "NO " + i,
    description: "这是一段描述",
    callNo: Math.floor(Math.random() * 1000),
    status: Math.floor(Math.random() * 10) % 4,
    updatedAt: "2018-07-26",
  });
}

export default {
  name: "ggmb",
  components: { StandardTable },
  data() {
    return {
      searchOptionsType: [
        { value: "1", label: "普通凡人" },
        { value: "2", label: "天庭天神" },
        { value: "3", label: "孤魂野鬼" },
        { value: "4", label: "妖魔鬼怪" },
        { value: "5", label: "天产石猴" },
      ],
      searchOptionsMode: [
        { value: "1", label: "善终" },
        { value: "2", label: "天灾" },
        { value: "3", label: "人祸" },
        { value: "4", label: "疾病" },
      ],
      advanced: true,
      columns: columns,
      dataSource: dataSource,
      selectedRows: [],

      column1: [
        {
          title: "ID",
          dataIndex: "id",
          sorter: true,
        },
        {
          title: "收款人",
          dataIndex: "name1",
          sorter: true,
        },
        {
          title: "收款金额",
          dataIndex: "price",
          sorter: true,
        },
        {
          title: "收到物品",
          dataIndex: "goods",
          sorter: true,
        },
        {
          title: "备注",
          dataIndex: "remark",
          sorter: true,
        },
        {
          title: "汇款人",
          dataIndex: "name2",
          sorter: true,
        },
        {
          title: "汇款地址",
          dataIndex: "address",
          sorter: true,
        },
        {
          title: "汇款时间",
          dataIndex: "time",
          sorter: true,
        },
      ],
      tableData1: [
        {
          id: 0,
          name1: "孙悟空",
          price: "100万亿",
          goods: "金箍棒",
          remark: "空空，忌日快乐。",
          name2: "唐三藏",
          address: "大唐墓地001号",
          time: "贞观1123年",
        },
        {
          id: 1,
          name1: "孙悟空",
          price: "100万亿",
          goods: "藕丝步云履",
          remark: "空空，忌日快乐。",
          name2: "唐三藏",
          address: "大唐墓地001号",
          time: "贞观1123年",
        },
        {
          id: 2,
          name1: "孙悟空",
          price: "100万亿",
          goods: "凤翅紫金冠",
          remark: "空空，忌日快乐。",
          name2: "唐三藏",
          address: "大唐墓地001号",
          time: "贞观1123年",
        },
        {
          id: 3,
          name1: "孙悟空",
          price: "100万亿",
          goods: "锁子黄金甲",
          remark: "空空，忌日快乐。",
          name2: "唐三藏",
          address: "大唐墓地001号",
          time: "贞观1123年",
        },
        {
          id: 4,
          name1: "孙悟空",
          price: "100万亿",
          goods: "紧箍",
          remark: "空空，忌日快乐。",
          name2: "唐三藏",
          address: "大唐墓地001号",
          time: "贞观1123年",
        },
        {
          id: 5,
          name1: "孙悟空",
          price: "100万亿",
          goods: "三根毫毛",
          remark: "空空，忌日快乐。",
          name2: "唐三藏",
          address: "大唐墓地001号",
          time: "贞观1123年",
        },
      ],
      column2: [
        {
          title: "ID",
          dataIndex: "id",
          sorter: true,
        },

        {
          title: "姓名",
          dataIndex: "name",
          sorter: true,
        },
        {
          title: "类别",
          dataIndex: "type",
          sorter: true,
        },
        {
          title: "寿命",
          dataIndex: "life",
          sorter: true,
        },
        {
          title: "资产",
          dataIndex: "price",
          sorter: true,
        },
      ],
      tableData2: [
        {
          id: 0,
          name: "孙悟空",
          type: "天生石猴",
          life: "628",
          price: "99999999万亿",
        },
        {
          id: 0,
          name: "孙悟空",
          type: "天生石猴",
          life: "628",
          price: "99999999万亿",
        },
        {
          id: 0,
          name: "孙悟空",
          type: "天生石猴",
          life: "628",
          price: "99999999万亿",
        },
        {
          id: 0,
          name: "孙悟空",
          type: "天生石猴",
          life: "628",
          price: "99999999万亿",
        },
        {
          id: 0,
          name: "孙悟空",
          type: "天生石猴",
          life: "628",
          price: "99999999万亿",
        },
        {
          id: 0,
          name: "孙悟空",
          type: "天生石猴",
          life: "628",
          price: "99999999万亿",
        },
        {
          id: 0,
          name: "孙悟空",
          type: "天生石猴",
          life: "628",
          price: "99999999万亿",
        },
      ],
    };
  },
  authorize: {
    deleteRecord: "delete",
  },
  methods: {
    deleteRecord(key) {
      this.dataSource = this.dataSource.filter((item) => item.key !== key);
      this.selectedRows = this.selectedRows.filter((item) => item.key !== key);
    },
    toggleAdvanced() {
      this.advanced = !this.advanced;
    },
    remove() {
      this.dataSource = this.dataSource.filter(
        (item) =>
          this.selectedRows.findIndex((row) => row.key === item.key) === -1
      );
      this.selectedRows = [];
    },
    onClear() {
      this.$message.info("您清空了勾选的所有行");
    },
    onStatusTitleClick() {
      this.$message.info("你点击了状态栏表头");
    },
    onChange() {
      this.$message.info("表格状态改变了");
    },
    onSelectChange() {
      this.$message.info("选中行改变了");
    },
    addNew() {
      this.dataSource.unshift({
        key: this.dataSource.length,
        no: "NO " + this.dataSource.length,
        description: "这是一段描述",
        callNo: Math.floor(Math.random() * 1000),
        status: Math.floor(Math.random() * 10) % 4,
        updatedAt: "2018-07-26",
      });
    },
    handleMenuClick(e) {
      if (e.key === "delete") {
        this.remove();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  margin-bottom: 54px;
}
.fold {
  width: calc(100% - 216px);
  display: inline-block;
}
.operator {
  margin-bottom: 18px;
}
@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}
</style>
